<template>
  <div class="patient-management">
    <!-- 病人列表 -->
    <el-card class="patient-list">
      <div slot="header" class="clearfix">
        <span>病人列表</span>
        <el-button type="primary" @click="showAddPatientDialog"
          >添加病人</el-button
        >
      </div>
      <el-table :data="patients" style="width: 100%">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column
          prop="medicalRecordNumber"
          label="病历号"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editPatient(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" @click="deletePatient(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加/编辑病人对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="30%"
    >
      <el-form :model="dialogForm" :rules="dialogRules" ref="dialogForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="dialogForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input-number v-model="dialogForm.age" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="dialogForm.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="病历号" prop="medicalRecordNumber">
          <el-input
            v-model="dialogForm.medicalRecordNumber"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="savePatient">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UserManagement",
  data() {
    return {
      patients: [
        {
          id: 1,
          name: "张三",
          age: 35,
          gender: "男",
          medicalRecordNumber: "P001"
        },
        {
          id: 2,
          name: "李四",
          age: 42,
          gender: "女",
          medicalRecordNumber: "P002"
        },
        {
          id: 3,
          name: "王五",
          age: 28,
          gender: "男",
          medicalRecordNumber: "P003"
        },
        {
          id: 4,
          name: "赵六",
          age: 50,
          gender: "女",
          medicalRecordNumber: "P004"
        }
      ],
      dialogVisible: false,
      dialogTitle: "",
      dialogForm: {
        id: null,
        name: "",
        age: 0,
        gender: "",
        medicalRecordNumber: ""
      },
      dialogRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        age: [
          { required: true, message: "请输入年龄", trigger: "blur" },
          { type: "number", message: "年龄必须为数字", trigger: "blur" }
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        medicalRecordNumber: [
          { required: true, message: "请输入病历号", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    showAddPatientDialog() {
      this.dialogTitle = "添加病人";
      this.dialogVisible = true;
      this.resetDialogForm();
    },
    editPatient(patient) {
      this.dialogTitle = "编辑病人";
      this.dialogVisible = true;
      this.dialogForm = { ...patient };
    },
    deletePatient(patient) {
      this.$confirm(`确定要删除病人 "${patient.name}" 吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        const index = this.patients.findIndex(p => p.id === patient.id);
        if (index !== -1) {
          this.patients.splice(index, 1);
          this.$message.success("病人删除成功");
        }
      });
    },
    savePatient() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          if (this.dialogForm.id) {
            // 编辑病人
            const index = this.patients.findIndex(
              p => p.id === this.dialogForm.id
            );
            if (index !== -1) {
              this.patients.splice(index, 1, this.dialogForm);
              this.$message.success("病人信息保存成功");
            }
          } else {
            // 添加病人
            const newId = this.patients.length + 1;
            this.dialogForm.id = newId;
            this.patients.push(this.dialogForm);
            this.$message.success("病人添加成功");
          }
          this.dialogVisible = false;
          this.resetDialogForm();
        }
      });
    },
    resetDialogForm() {
      this.dialogForm = {
        id: null,
        name: "",
        age: null,
        gender: "",
        medicalRecordNumber: ""
      };
      this.$refs.dialogForm.clearValidate();
    }
  }
};
</script>

<style scoped>
.patient-management {
  padding: 20px;
}

.patient-list {
  margin-bottom: 20px;
  box-shadow: none;
}

.patient-list .el-card__header {
  justify-content: space-between;
}

.add-patient {
  margin-bottom: 20px;
}

.add-patient .el-button {
  margin-left: 10px;
}
</style>
